<template>
	<view class="callWait_container">
		<u-navbar title="等待" @leftClick="cancelBtn" :safeAreaInsetTop="true" placeholder>
		</u-navbar>
		<view class="getAddress">
			您上车的地点为<text class="view-text">{{addressName}}</text>
		</view>
		<view class="waitText">
			<text>正在为您寻找车辆，请稍等...</text>
		</view>
		<view class="lookFor">
			<text style="color: #F0AD4E;">正在为您寻找车辆...</text>
			<view class="view-anim"><span></span></view>
		</view>

		<view class="cancelBtn">
			<u-button type="warning" @click="cancelBtn">取消行程</u-button>
		</view>
		<!-- 提示订单的 -->
		<u-toast ref="uToast"></u-toast>
		<!-- 提示用户是否取消 -->
		<u-modal showCancelButton @cancel="tipsShow = false" @confirm="determineBtn" :show="tipsShow" :title="title"
			:content='content'>
		</u-modal>
	</view>
</template>

<script>
	import amap from "../../common/amap-wx.130.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				addressName: '', // 具体地址的名字
				repetitionTime: '', //重复发送订单 定时器
				amapPlugin: null, // 插件效果
				gaodeKey: "4412f1a1546136b8476c2c1011cbbad9", //  高德地图申请的key
				tipsShow: false, //提示用户是否取消
				content: '是否取消叫车', //提示内容
			}
		},
		computed: {
			...mapState('userInfo', ['userOrder'])
		},
		onLoad() {
			// 高德地图sdk的获取
			this.amapPlugin = new amap.AMapWX({
				key: this.gaodeKey
			})

			// 定位当前位置----获取上车地点
			// this.getCurrent()
			this.addressName = this.userOrder.origin

			// 重复发送订单
			this.repetitionTime = setInterval(() => {
				// 发送 socket
				this.socket.emit('callCar', this.userOrder)
			}, 1000)


		},
		onShow() {
			this.getmsg()
		},
		methods: {
			...mapMutations('userInfo', ['setOrderInfo', 'setUserOrder']),
			...mapMutations('userLocation', ['getEnd']),
			// 收到司机接单信息
			getmsg() {
				this.socket.on('callUser', message => {
					console.log('收到司机接单信息', message, 64)

					// 暂停发送订单
					clearInterval(this.repetitionTime)

					// 存订单
					this.setOrderInfo(message)

					// 提示用户
					uni.showToast({
						title: '叫车成功',
						duration: 2000,
					})

					// 同步提示跳转
					setTimeout(() => {
						uni.redirectTo({
							url: '/subpkg/userWaitDriver/userWaitDriver'
						})
					}, 2000)
				})
			},
			// 高德地图api获取具体位置的地址信息
			// getCurrent() {
			// 	this.amapPlugin.getRegeo({
			// 		success: data => {
			// 			this.addressName = data[0].name
			// 			this.addressDesc = data[0].desc
			// 		},
			// 		fail: err => {
			// 			console.log(err, '报错了')
			// 		}
			// 	})
			// },
			// 提示模态框
			cancelBtn() {
				this.tipsShow = true
				console.log(this.userOrder)
			},
			// 取消订单
			async determineBtn() {
				// 停止发送叫车
				clearInterval(this.repetitionTime)

				// 通知司机，订单取消
				this.userOrder.cancelOrder = true

				const result = await this.$http('/userPlanOrder', this.userOrder, "POST")
				// 取消成功
				if (result.code == 200) {
					// 清空目的地
					this.getEnd('')
					// 接单页面清除该用户订单--socket
					this.socket.emit('callCar', this.userOrder)

					this.$refs.uToast.show({
						type: 'success',
						message: result.data.message,
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/home/home'
						})
					}, 1000)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.callWait_container {
		// background: #F1F1F1;
	}

	.view-text {
		font-size: 1.0em;
		margin-left: 4%;
		color: #DD524D;
	}

	.getAddress {
		width: 100%;
		height: 84rpx;
		background-color: #FFFFFF;
		line-height: 100rpx;
		font-size: 30rpx;
		padding-left: 14rpx;
	}

	.getAddress image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 3%;
		margin-left: 5%;
		margin-right: 3%;
		float: left;
	}

	.waitText {
		text-align: center;
		font-size: 34rpx;
		margin-top: 4%;
		margin-bottom: 7%;
	}

	.lookFor {
		position: relative;
		width: 500rpx;
		height: 500rpx;
		border: 5px solid #C8C7CC;
		border-radius: 50%;
		margin: auto;
		text-align: center;
		line-height: 500rpx;
		font-size: 1.2em;

		.view-anim {
			width: 500rpx;
			height: 500rpx;
			position: absolute;
			left: -4%;
			top: -4%;
			border-radius: 50%;
			border: 10px solid transparent;
			/*旋转*/
			animation: circleRoate 3s linear infinite;
		}

		span {
			position: absolute;
			left: 24%;
			top: 1%;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background: #F0AD4E;
		}
	}

	.cancelBtn {
		width: 100%;
		position: absolute;
		bottom: 0%;
	}

	/deep/ .u-modal__content__text {
		font-size: 20px;
		text-align: center;
	}

	@keyframes circleRoate {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
